<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Battery Lifecycle Management System</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#22c55e',
                        secondary: '#16a34a'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            min-height: 1024px;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }
    </style>
</head>

<body class="bg-gray-50">
    <nav class="bg-white shadow-sm fixed w-full z-50">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="text-2xl font-['Pacifico'] text-primary">
                        <img src="./imgs/logo.png" alt="">
                    </div>
                    <div class="ml-10 flex space-x-8">
                        <a href="home.html" class="text-gray-900 hover:text-primary px-3 py-2 text-sm font-medium">Home</a>
                        <a href="#" class="text-gray-900 hover:text-primary px-3 py-2 text-sm font-medium">About Us</a>
                        <a href="#"
                            class="text-primary border-b-2 border-primary px-3 py-2 text-sm font-medium">Products</a>
                        <a href="#" class="text-gray-900 hover:text-primary px-3 py-2 text-sm font-medium">Solutions</a>
                        <a href="#" class="text-gray-900 hover:text-primary px-3 py-2 text-sm font-medium">Partners</a>
                        <!-- <a href="#" class="text-gray-900 hover:text-primary px-3 py-2 text-sm font-medium">Contact</a> -->
                    </div>
                </div>
                <div class="flex items-center">
                    <a href="home.html">
                        <button
                        class="!rounded-button bg-primary text-white px-6 py-2 text-sm font-medium hover:bg-primary/90 whitespace-nowrap">Contact
                        Us</button>
                    </a>
                    
                </div>
            </div>
        </div>
    </nav>
    <main class="pt-16">
        <div class="max-w-7xl mx-auto px-4 py-8">
            <div class="flex items-center text-sm text-gray-500 mb-6">
                <a href="#" class="hover:text-primary">Home</a>
                <i class="fas fa-chevron-right mx-2 text-xs"></i>
                <a href="#" class="hover:text-primary">Products</a>
                <i class="fas fa-chevron-right mx-2 text-xs"></i>
                <span class="text-gray-900">Battery Lifecycle Management System</span>
            </div>
            <div class="bg-white rounded-lg shadow-sm p-8 mb-8">
                <div class="flex gap-8">
                    <div class="flex-1">
                        <h1 class="text-3xl font-bold mb-4">Battery Lifecycle Management System</h1>
                        <p class="text-gray-600 mb-6">A comprehensive battery asset management solution covering the
                            entire lifecycle from design, production, transportation, usage to recycling, helping
                            enterprises enhance battery asset value.</p>
                        <!-- <div class="flex gap-4 mb-8">
                            <button
                                class="!rounded-button bg-primary text-white px-8 py-3 font-medium hover:bg-primary/90 whitespace-nowrap">Book
                                Demo</button>
                            <button
                                class="!rounded-button border border-gray-300 px-8 py-3 font-medium hover:border-primary hover:text-primary whitespace-nowrap">Pricing</button>
                        </div> -->
                        <div class="flex gap-8">
                            <div class="text-center">
                                <div class="text-2xl font-bold text-primary mb-2">99.9%</div>
                                <div class="text-gray-600 text-sm">System Stability</div>
                            </div>
                            <div class="text-center">
                                <div class="text-2xl font-bold text-primary mb-2">10000+</div>
                                <div class="text-gray-600 text-sm">Clients Served</div>
                            </div>
                            <div class="text-center">
                                <div class="text-2xl font-bold text-primary mb-2">95%</div>
                                <div class="text-gray-600 text-sm">Customer Satisfaction</div>
                            </div>
                        </div>
                    </div>
                    <div class="w-[400px] h-[300px] rounded-lg overflow-hidden">
                        <img src="https://ai-public.mastergo.com/ai/img_res/e35975302bafe733ddc0369b0a27ed6f.jpg"
                            class="w-full h-full object-cover" alt="产品展示">
                    </div>
                </div>
            </div>
            <div class="mb-8">
                <div class="border-b border-gray-200">
                    <nav class="flex space-x-8">
                        <button class="tab-btn text-primary border-b-2 border-primary px-4 py-4 text-sm font-medium"
                            data-tab="features">Features</button>
                        <button class="tab-btn text-gray-500 hover:text-gray-700 px-4 py-4 text-sm font-medium"
                            data-tab="tech">Technology</button>
                        <button class="tab-btn text-gray-500 hover:text-gray-700 px-4 py-4 text-sm font-medium"
                            data-tab="value">Benefits</button>
                        <button class="tab-btn text-gray-500 hover:text-gray-700 px-4 py-4 text-sm font-medium"
                            data-tab="service">Services</button>
                        <button class="tab-btn text-gray-500 hover:text-gray-700 px-4 py-4 text-sm font-medium"
                            data-tab="compare">Comparison</button>
                        <button class="tab-btn text-gray-500 hover:text-gray-700 px-4 py-4 text-sm font-medium"
                            data-tab="faq">FAQ</button>
                    </nav>
                </div>
                <div id="features" class="tab-content active py-8">
                    <div class="grid grid-cols-3 gap-6">
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                                <i class="fas fa-battery-full text-primary text-xl"></i>
                            </div>
                            <h3 class="text-lg font-medium mb-3">Full Lifecycle Data Collection</h3>
                            <p class="text-gray-600">Covers the entire process from battery design to recycling,
                                monitors battery performance metrics in real-time, and generates detailed data reports
                                and visualization charts.</p>
                        </div>
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                                <i class="fas fa-chart-line text-primary text-xl"></i>
                            </div>
                            <h3 class="text-lg font-medium mb-3">Intelligent Performance Analysis</h3>
                            <p class="text-gray-600">Uses advanced algorithms for deep analysis of battery data,
                                predicts lifespan and performance trends, and provides early warnings for potential
                                failures.</p>
                        </div>
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                                <i class="fas fa-shield-alt text-primary text-xl"></i>
                            </div>
                            <h3 class="text-lg font-medium mb-3">Data Security Guarantee</h3>
                            <p class="text-gray-600">Utilizes blockchain technology to ensure data security and
                                immutability, providing reliable data support for users.</p>
                        </div>
                    </div>
                    <div class="mt-12">
                        <h2 class="text-2xl font-bold mb-6">Performance Monitoring</h2>
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <div id="performanceChart" style="width: 100%; height: 400px;"></div>
                        </div>
                    </div>
                </div>
                <div id="tech" class="tab-content py-8">
                    <div class="grid grid-cols-2 gap-6">
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <h3 class="text-lg font-medium mb-4">Artificial Intelligence Algorithm</h3>
                            <ul class="space-y-3">
                                <li class="flex items-start">
                                    <i class="fas fa-check text-primary mt-1 mr-3"></i>
                                    <span class="text-gray-600">Deep Learning Model Prediction Accuracy
                                        Optimization</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-primary mt-1 mr-3"></i>
                                    <span class="text-gray-600">Real-time Data Analysis and Fault Warning</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-primary mt-1 mr-3"></i>
                                    <span class="text-gray-600">Adaptive Algorithm Continuous Optimization</span>
                                </li>
                            </ul>
                        </div>
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <h3 class="text-lg font-medium mb-4">Blockchain Technology</h3>
                            <ul class="space-y-3">
                                <li class="flex items-start">
                                    <i class="fas fa-check text-primary mt-1 mr-3"></i>
                                    <span class="text-gray-600">Data Immutability Guarantee</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-primary mt-1 mr-3"></i>
                                    <span class="text-gray-600">Distributed Storage Enhanced Security</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-primary mt-1 mr-3"></i>
                                    <span class="text-gray-600">Smart Contract Automated Execution</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="value" class="tab-content py-8">
                    <div class="grid grid-cols-3 gap-6">
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                                <i class="fas fa-coins text-primary text-xl"></i>
                            </div>
                            <h3 class="text-lg font-medium mb-3">Reduce Operating Costs</h3>
                            <p class="text-gray-600">Optimize battery usage strategies, extend battery life, improve
                                asset utilization, and significantly reduce operating costs.</p>
                        </div>
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                                <i class="fas fa-chart-pie text-primary text-xl"></i>
                            </div>
                            <h3 class="text-lg font-medium mb-3">Improve Efficiency</h3>
                            <p class="text-gray-600">Automated data collection and analysis, reducing manual operations,
                                improving work efficiency and accuracy.</p>
                        </div>
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                                <i class="fas fa-shield-alt text-primary text-xl"></i>
                            </div>
                            <h3 class="text-lg font-medium mb-3">Reduce Risk</h3>
                            <p class="text-gray-600">Early warning of potential failures, reducing safety risks,
                                ensuring business continuity.</p>
                        </div>
                    </div>
                </div>
                <div id="service" class="tab-content py-8">
                    <div class="grid grid-cols-2 gap-6">
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <h3 class="text-lg font-medium mb-4">Technical Support Services</h3>
                            <ul class="space-y-3">
                                <li class="flex items-start">
                                    <i class="fas fa-headset text-primary mt-1 mr-3"></i>
                                    <span class="text-gray-600">24/7 Technical Support</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-tools text-primary mt-1 mr-3"></i>
                                    <span class="text-gray-600">System Installation and Configuration Guidance</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-sync text-primary mt-1 mr-3"></i>
                                    <span class="text-gray-600">Regular System Maintenance and Upgrades</span>
                                </li>
                            </ul>
                        </div>
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <h3 class="text-lg font-medium mb-4">Training and Consulting</h3>
                            <ul class="space-y-3">
                                <li class="flex items-start">
                                    <i class="fas fa-chalkboard-teacher text-primary mt-1 mr-3"></i>
                                    <span class="text-gray-600">Professional Training Courses</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-comments text-primary mt-1 mr-3"></i>
                                    <span class="text-gray-600">One-on-One Consulting Services</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-file-alt text-primary mt-1 mr-3"></i>
                                    <span class="text-gray-600">Customized Solutions</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div id="compare" class="tab-content py-8">
                    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                        <table class="w-full">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-4 text-left text-sm font-medium text-gray-500">Feature</th>
                                    <th class="px-6 py-4 text-center text-sm font-medium text-gray-500">Basic</th>
                                    <th class="px-6 py-4 text-center text-sm font-medium text-gray-500">Professional
                                    </th>
                                    <th class="px-6 py-4 text-center text-sm font-medium text-gray-500">Enterprise</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 text-sm text-gray-900">Data Collection</td>
                                    <td class="px-6 py-4 text-center"><i class="fas fa-check text-primary"></i></td>
                                    <td class="px-6 py-4 text-center"><i class="fas fa-check text-primary"></i></td>
                                    <td class="px-6 py-4 text-center"><i class="fas fa-check text-primary"></i></td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 text-sm text-gray-900">Performance Analysis</td>
                                    <td class="px-6 py-4 text-center"><i class="fas fa-check text-primary"></i></td>
                                    <td class="px-6 py-4 text-center"><i class="fas fa-check text-primary"></i></td>
                                    <td class="px-6 py-4 text-center"><i class="fas fa-check text-primary"></i></td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 text-sm text-gray-900">Warning System</td>
                                    <td class="px-6 py-4 text-center"><i class="fas fa-minus text-gray-400"></i></td>
                                    <td class="px-6 py-4 text-center"><i class="fas fa-check text-primary"></i></td>
                                    <td class="px-6 py-4 text-center"><i class="fas fa-check text-primary"></i></td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 text-sm text-gray-900">AI Analysis</td>
                                    <td class="px-6 py-4 text-center"><i class="fas fa-minus text-gray-400"></i></td>
                                    <td class="px-6 py-4 text-center"><i class="fas fa-minus text-gray-400"></i></td>
                                    <td class="px-6 py-4 text-center"><i class="fas fa-check text-primary"></i></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id="faq" class="tab-content py-8">
                    <div class="space-y-4">
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <h3 class="text-lg font-medium mb-2">Does the system support multiple battery types?</h3>
                            <p class="text-gray-600">Yes, our system supports various types of batteries, including
                                lithium-ion batteries, lead-acid batteries, and other mainstream battery types. The
                                system automatically adjusts monitoring parameters and analysis models based on
                                different battery characteristics.</p>
                        </div>
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <h3 class="text-lg font-medium mb-2">How is data security ensured?</h3>
                            <p class="text-gray-600">We use multiple encryption technologies and blockchain technology
                                to protect data security. All data transmissions are encrypted and stored in a
                                distributed system to ensure data cannot be tampered with or lost.</p>
                        </div>
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <h3 class="text-lg font-medium mb-2">How long does system deployment take?</h3>
                            <p class="text-gray-600">Standard deployment usually takes 2-3 working days to complete. If
                                customized development is needed, the time will be extended accordingly. Our technical
                                team will provide guidance throughout the process to ensure smooth system launch.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="bg-gray-900 text-white py-12">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <div>
                        <h3 class="text-lg font-semibold mb-4">About Us</h3>
                        <p class="text-gray-400">Committed to providing innovative management solutions for the battery
                            industry and promoting sustainable development</p>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-400 hover:text-white">Products</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white">Solutions</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white">Partners</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold mb-4">Contact</h3>
                        <ul class="space-y-2">
                            <li class="text-gray-400">Email: contact@batterymanagement.com</li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold mb-4">Follow Us</h3>
                        <div class="flex space-x-4">
                            <a href="#" class="text-gray-400 hover:text-white">
                                <i class="fab fa-weixin text-2xl"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-white">
                                <i class="fab fa-weibo text-2xl"></i>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-white">
                                <i class="fab fa-linkedin text-2xl"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
                    <p>&copy; 2025 Battpass Management Solutions. All rights reserved.</p>
                </div>
            </div>
        </footer>
    </main>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const performanceChart = echarts.init(document.getElementById('performanceChart'));
            const option = {
                animation: false,
                title: {
                    text: 'Battery Performance Monitoring Data'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Power', 'Temperature', 'Health']
                },
                xAxis: {
                    type: 'category',
                    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '电量',
                        type: 'line',
                        data: [90, 88, 85, 84, 82, 80],
                        itemStyle: { color: '#22c55e' }
                    },
                    {
                        name: '温度',
                        type: 'line',
                        data: [25, 26, 25, 27, 26, 28],
                        itemStyle: { color: '#16a34a' }
                    },
                    {
                        name: '健康度',
                        type: 'line',
                        data: [95, 94, 93, 92, 90, 89],
                        itemStyle: { color: '#059669' }
                    }
                ]
            };
            performanceChart.setOption(option);
            const tabBtns = document.querySelectorAll('.tab-btn');
            const tabContents = document.querySelectorAll('.tab-content');
            tabBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    const tabId = btn.getAttribute('data-tab');
                    tabBtns.forEach(btn => {
                        btn.classList.remove('text-primary', 'border-b-2', 'border-primary');
                        btn.classList.add('text-gray-500');
                    });
                    tabContents.forEach(content => {
                        content.classList.remove('active');
                    });
                    btn.classList.add('text-primary', 'border-b-2', 'border-primary');
                    btn.classList.remove('text-gray-500');
                    document.getElementById(tabId).classList.add('active');
                    if (tabId === 'features') {
                        performanceChart.resize();
                    }
                });
            });
            window.addEventListener('resize', function () {
                performanceChart.resize();
            });
        });
    </script>
</body>

</html>